<template>
	<div id="login">
		<div class="left">
			<img src="../../assets/icon/loginBG.png" alt />
			<div class="titleWrap">
				<div class="title">支付管理平台</div>
			</div>
		</div>
		<div class="right">
			<div class="right-content">
				<!-- <img src="../../assets/icon/ruyi.png" alt /> -->
				<div class="main">
					<h1>管理员登录</h1>
					<div class="code">
						<input type="text" v-model="phoneNumber" placeholder="请输入账号" />
					</div>

					<div class="code">
						<input ref="code" v-model="phoneCode" id="code" type="password" placeholder="请填写密码" />
						<!-- <a href="javascript:;" v-if="codeTime == 0" class="text" @click="loginTo">获取短信验证码</a>
            <a href="javascript:;" v-else class="text">{{codeTime}}s</a>-->
					</div>
					<!-- <div class="code flex-between">
						<input v-model="code" type="number" placeholder="请填写验证码" />
						<img ref="codeImg" style="width:80px" src="" alt="" />
					</div> -->
					<el-button type="primary" style="margin-top: 30px" @click="login">登录</el-button>
					<div class="main-bottom margin-50"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
var timeBlock;
import { loginByCode } from '../api';
import { JSEncrypt } from 'jsencrypt';
import { routeGuard } from '@/assets/js/permission';
export default {
	name: 'login',
	data() {
		return {
			check: true, //阅读同意
			successButton: true, //确认按钮
			phoneCode: '', //短信验证码
			pass: '', //第一次密码
			passWord: '', //重复密码
			code: '', //用户输入的图形验证码
			phoneNumber: '', //输入手机号
			successphoneNumber: '', //上一次发送验证码的手机号
			imageCaptchaUrl: '', //验证图片
			imageCaptchaToken: '', //图片验证令牌
			// passwordImg: require("../../assets/icon/bxsmm.png"),
			// passwordImg2: require("../../assets/icon/xsmm.png"),
			isok: true, //控制密码的显隐
			isok2: true, //控制密码的显隐
			value: '中国+86',
			homePath: '/contract/List',
			// homePath: "/home",
			codeTime: 0,
			publicKey:
				'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDwQa/86B4NJwY/MnnoxsuRlLUbFCg2p3GaH3EjvrJ9OfjLkTA97VtjllXkj/E0iaRDNbh5HbDh+QJBZIoMerlAl/Mkso5Z5uyZ0Te5hOQ8lUOzaYbVBx119sRkWGPBQBlraizUOWczXjfCv/Y2JjJoNDqEWiPAeg0PCP/H/v24zQIDAQAB',
			codeImg: '',
		};
	},
	created() {
		this.enterKeyup();
		if (
			window.localStorage.userList &&
			JSON.parse(window.localStorage.userList).token
		) {
			//缓存已有登录信息跳转
			routeGuard(true); //重置路由
		}
		this.$nextTick(() => {
			this.imgChange();
		});
	},
	destroyed() {
		console.log('close');
		this.enterKeyupDestroyed();
	},
	methods: {
		encrypt(data) {
			// 新建JESencrypt对象
			const encryptor = new JSEncrypt();
			//   设置公钥
			encryptor.setPublicKey(this.publicKey); // publicKey为公钥
			// return encryptor.encrypt(pwd);
			var data2 = data;
			console.log('加密前', data2);
			// var encrypt_data = encodeURIComponent(encryptor.encrypt(data2));
			var encrypt_data = encryptor.encrypt(data2);
			console.log('加密后', encrypt_data);
			return encrypt_data;
		},
		imgChange() {
			var url =
				this.$store.state.openUrl +
				'/web/system/user/codeImage?t=' +
				new Date().getTime();
			this.$refs.codeImg.src = url;
		},
		enterKey(event) {
			const componentName = this.$options.name;
			const code = event.keyCode
				? event.keyCode
				: event.which
				? event.which
				: event.charCode;
			// console.log(code);
			if (code == 13) {
				this.login();
			}
		},
		enterKeyupDestroyed() {
			//取消监听
			document.removeEventListener('keyup', this.enterKey);
		},
		enterKeyup() {
			//监听回车
			document.addEventListener('keyup', this.enterKey);
		},
		countDown() {
			this.codeTime = 60;
			timeBlock = setInterval((res) => {
				if (this.codeTime > 0) {
					this.codeTime--;
				} else {
					clearInterval(timeBlock);
				}
			}, 1000);
		},
		countDown() {
			this.codeTime = 60;
			timeBlock = setInterval((res) => {
				if (this.codeTime > 0) {
					this.codeTime--;
				} else {
					clearInterval(timeBlock);
				}
			}, 1000);
		},
		//发送短信验证码
		loginTo(e) {
			this.countDown();
			var that = this;
			var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
			if (this.phoneNumber == '') {
				alert('请输入手机号码');
			} else if (!reg.test(this.phoneNumber)) {
				alert('手机格式不正确');
			} else {
				that.successphoneNumber = this.phoneNumber;
				console.log(
					this.phoneNumber,
					this.imageCaptchaToken,
					this.code
				);
				sendPhoneCode({
					phone: this.phoneNumber,
					type: 2,
				}).then((res) => {
					if (res.code == 1001) {
						this.$message({
							type: 'success',
							message: '发送成功',
						});
					}
				});
			}
		},
		list_contract() {
			var params = { type: '国际' };
			this.$myApi.list_contract(params).then((res) => {
				if (res.code == 200) {
					this.$store.state.contractAllList = res.data;
				}
			});
		},
		// 登录
		login() {
			var parmas = {
				loginName: this.phoneNumber,
				// authCode: this.encrypt(this.phoneCode),
				authCode: this.phoneCode,
				authType: 'PASSWORD',
			};
			this.$myApi.login(parmas).then((res) => {
				if (res.code == 200) {
					// this.$store.state.token = res.returnData.token

					this.$store.state.token = res.result.accessToken;
					window.localStorage.setItem(
						'token',
						res.result.accessToken
					);
					this.getUserInfo_user();
					// this.listMenu();
					var menuList = [
						{
							name: '支付业务管理',
							childList: [
								{
									name: '提现订单管理',
									path: '/withdrawOrder/List',
								},
								{
									name: '退款订单管理',
									path: '/contract/List',
								},
								{
									name: '支付订单管理',
									path: '/payOrder/List',
								},
							],
						},
						{
							name: '风控规则',
							childList: [
								{
									name: '业务风控规则',
									path: '/riskRules/List',
								},
								{
									name: 'IP黑名单',
									path: '/IPBlack/List',
								},
							],
						},
						{
							name: '商户管理',
							childList: [
								{
									name: '上游商户',
									path: '/upMerchant/List',
								},
								{
									name: '下游商户',
									path: '/downMerchant/List',
								},
							],
						},
					];
					window.localStorage.setItem(
						'menuList',
						JSON.stringify(menuList)
					);
					routeGuard(true); //重置路由
				} else {
					this.imgChange();
				}
			});
		},
		listMenu() {
			var params = {
				pageNum: 1,
				pageSize: 9999,
				page: true,
			};
			this.$myApi.listMenu(params).then((res) => {
				if (res.code == 200) {
					window.localStorage.setItem(
						'menuList',
						JSON.stringify(res.result.list)
					);
					routeGuard(true); //重置路由

					this.$router.push(this.homePath);
				}
			});
		},
		getUserInfo_user() {
			this.$myApi.getUserInfo_user().then((res) => {
				if (res.code == 200) {
					window.localStorage.setItem(
						'userList',
						JSON.stringify(res.result)
					);
					this.$router.push(this.homePath);
				}
			});
		},
	},
	watch: {},
};
</script>
<style scoped>
#login .code {
	padding: 10px 0;
	width: 350px;
	border-bottom: 2px solid rgb(244, 244, 244);
	margin-top: 10px;
	position: relative;
}

#login .code .text {
	float: right;
}
.imageCaptchaUrl {
	position: absolute;
	height: 30px;
	width: 85px;
	right: 0;
	top: 0;
}
.title {
	color: white;
	font-size: 50px;
	font-weight: 700;
}
.titleWrap {
	position: absolute;
	top: 50px;
	left: 20px;
}
</style>

